<template>
    <div class="login_form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="名称:" prop="userName">
                <el-autocomplete v-model="ruleForm.userName"
                                 :fetch-suggestions="querySearch"
                                 placeholder="请输入内容"
                                 :debounce="0"
                                 :trigger-on-focus="false">
                </el-autocomplete>
            </el-form-item>

            <el-form-item label="密码:" prop="password">
                <el-input type="password" v-model="ruleForm.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-button type="primary" id="formSubmitBtn" @click="handleFormSubmit">登录</el-button>

        </el-form>

    </div>
</template>

<script>
import variables from "@/assets/variables";
export default {
    name: "Login",
    data() {
        return {
            userName: "",
            users: [],
            ruleForm: {
                userName: "",
                password: "",
            },
            rules: {
                name: [{ required: true, message: '请输入您的名称', trigger: 'blur' }],
            }
        }
    },
    methods: {
        querySearch(queryString, cb) {
            let users = this.users;
            let results = queryString ? users.filter(this.createFilter(queryString)) : users;
            // 调用 callback 返回建议列表的数据
            cb(results)

        },
        createFilter(queryString) {
            return (user) => {
                return (user.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleFormSubmit() {
            let userName = this.ruleForm.userName;
            let pwd = this.ruleForm.password;
            let u = null;
            let msg = "";
            for (let i in this.users) {
                if (this.users[i].value===userName) {
                    if (this.users[i].password===pwd) {
                        u = this.users[i];
                    }else {
                        msg = "密码错误";
                    }
                    break;
                }
                msg = "账号不存在";
            }
            if (u === null && msg !== "") {
                this.$message({
                    type: "warning",
                    message: msg,
                })
            }else if (u !== null) {
                if (!u.status) {
                    this.$message({
                        type: "warning",
                        message: "该账号已停用",
                    })
                }else {
                    if (u.identityType==="0") {
                        this.$router.push("/admin")
                    }else if (u.identityType==="1") {
                        this.$router.push({
                            path: '/worker/'+u.name+'/eventMaintenance'
                        })
                    }else if (u.identityType==="2") {
                        this.$router.push({
                            path: '/commander/'+u.name+'/reportManagement'
                        })
                    }else if (u.identityType==="3") {
                        this.$router.push({
                            path: '/expert/'+u.name+'/reportCheck'
                        })
                    }else {
                        this.$message({
                            type: "error",
                            message: "未知错误",
                        })
                    }
                }
            }else {
                this.$message({
                    type: "error",
                    message: "未知错误",
                })
            }
        }
    },
    mounted() {
        this.users = variables.users;
    }
}
</script>

<style scoped>
.login_form {
    display: flex;
    margin: 100px auto;
    align-items: center;
    justify-content: space-around;
}

#formSubmitBtn {
    width: 100px;
}

.el-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>